﻿<template>
  <div class="page-header" :class="{ 'is-white': whiteBg }">
    <div class="page-header-left">
      <img
        class="header-logo"
        src="https://qingqingrent.oss-cn-hangzhou.aliyuncs.com/backstage/xiaochengxu/newCate/logo.png"
      />
      <!-- <img
        class="header-homebtn"
        @click="goDetail"
        src="https://qingqingrent.oss-cn-hangzhou.aliyuncs.com/backstage/xiaochengxu/helpcenter/homebtn.png"
      /> -->
    </div>
    <div class="page-header-right">
      <div class="header-backbtn" @click="handleBackClick">返回运管后台</div>
      <!-- <div class="avatar-wrapper">
        <div class="left-avatar">
          <img
            class="avatar-img"
            src="https://qingqingrent.oss-cn-hangzhou.aliyuncs.com/backstage/xiaochengxu/helpcenter/homebtn.png"
          />
        </div>
        <div class="right-phone">17600300012</div>
        <img
          class="right-arrow"
          src="https://qingqingrent.oss-cn-hangzhou.aliyuncs.com/backstage/xiaochengxu/helpcenter/arrow-down-fill.png"
        />
      </div> -->
    </div>
  </div>
</template>
<script setup>
  import { ROUTE_PATHS, STORAGE_KEYS } from "@/utils/const";
  defineProps({
    // 父组件传 <GlobalHeader white-bg />
    whiteBg: { type: Boolean, default: false },
  });

  const router = useRouter();

  function handleBackClick() {
    // 优先从 localStorage 取（和 handleServiceCenter 保存一致），兼容性兜底从 sessionStorage 取
    const prev =
      localStorage.getItem(STORAGE_KEYS.SC_PREV_ROUTE) || sessionStorage.getItem(STORAGE_KEYS.SC_PREV_ROUTE) || "";

    // 有来源就回到来源；否则回到工作台根路由
    const target = prev || ROUTE_PATHS.ROOT;

    // 生成可打开的 url
    const href = router.resolve(target).href;
    console.error(href);
    // 新标签页打开（按需求）
    window.open(href, "_blank");
  }
</script>

<style lang="scss" scoped>
  .page-header {
    width: 100%;
    height: 64px;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    flex-shrink: 0;

    &.is-white {
      background-color: var(--bg);
    }
    .page-header-left {
      display: flex;
      align-items: center;
      .header-logo {
        width: 121px;
        height: 56px;
        margin-right: 21px;
      }
      .header-homebtn {
        width: 32px;
        height: 32px;
        cursor: pointer;
      }
    }
    .page-header-right {
      display: flex;
      align-items: center;
      .header-backbtn {
        height: 36px;
        line-height: 36px;
        text-align: center;
        font-size: 14px;
        color: #1b0204;
        cursor: pointer;
        padding: 0 12px;
        background-color: #ffffff;
        border: solid #e6e6e6 1px;
        border-radius: 4px;
        letter-spacing: 0%;
        box-sizing: border-box;
        // margin-right: 32px;
      }
      .avatar-wrapper {
        display: flex;
        align-items: center;
        .left-avatar {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          border: solid #ffffff 1px;
          overflow: hidden;
          position: relative;
          margin-right: 9px;
          cursor: pointer;
          .avatar-img {
            width: 32px;
            height: 32px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          }
        }
        .right-phone {
          font-size: 14px;
          color: #15194d;
          margin-right: 10px;
          cursor: pointer;
        }
        .right-arrow {
          width: 12px;
          height: 12px;
          cursor: pointer;
        }
      }
    }
  }
</style>
